$primary-color: #566CF5;
$backgroundColor: #17222f;
$fontColor: #eee;
$borderColor: #304156;
$card-bg-color: #1C2938;
$input-bg-color: #17222f;

$app-bg-color: #121d2a;
$disabled-color : #303B48;

// #2d3f54


body.app-theme-dark {
    color: $fontColor;
    *::-webkit-scrollbar-track-piece { background: $backgroundColor; }
    
    *::-webkit-scrollbar { width: 6px; }

    *::-webkit-scrollbar-thumb { background: $borderColor; border-radius: 20px; }

    // 左侧菜单
    #app .sidebar-container {
     
      .el-menu-item.is-active {
        color: $fontColor !important;
        background-color: $primary-color !important;
      }
      .el-submenu {
        opacity: 0.9;
        .el-menu{
          background-color: #1C2938 !important;
  
          .el-menu-item{
            background-color: transparent !important;

          }
          .el-menu-item.is-active {
            color: $fontColor !important;
            background-color: $primary-color !important;
          }
        }

      }
    }

    //主容器 
    // .main-container{ background-color: $app-bg-color; } 

    .layout-header{ background-color: #304156 }

    // 顶部面包屑
    .fixed-header .navbar{ background-color: #1c2938; }
    .fixed-header .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link { color: #999; }
    .fixed-header .el-breadcrumb__item:last-child .el-breadcrumb__inner { color: $fontColor;}

    // 按钮
    .el-button:not(.el-button--primary){
      background: none;
      border-color: $primary-color;
      color: $primary-color ;

      &:hover{
        opacity: 0.9;
      }
    }
    .el-button.el-button--text { 
      border-color: transparent;

      &.is-disabled { color: #666; }
    }
    .el-button.el-button--default.is-disabled { border-color: #abb6fa * .5; color: #abb6fa * .5}


    // 卡片
    .el-card { color: $fontColor; border: $borderColor; }
    .el-card__header { border-bottom: 1px solid $app-bg-color; }
    
    

    // 分页器
    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        background-color: $backgroundColor;
        color: $fontColor;
    }

    // 下拉菜单容器
    .el-select-dropdown {
        background-color: $backgroundColor;
        border: 1px solid $borderColor;
    }
    .el-select-dropdown__item.selected {
        background-color: $borderColor;
        color: $fontColor;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
        background-color: $borderColor;
        color: $fontColor;
    }

    // 三角
    
    .el-popper[x-placement^=bottom] .popper__arrow{
        border-bottom-color: $borderColor;
    }
    .el-popper[x-placement^=bottom] .popper__arrow::after{
        border-bottom-color: $backgroundColor;
    }

    // 级联选择器
    .el-cascader__dropdown{
        background: $backgroundColor;
        border: 1px solid $borderColor;
    }
    .el-cascader-menu {
        border-right: 1px  solid $borderColor;
    }
    .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
        background: $borderColor;
    }
    .el-cascader__tags .el-tag { background: $backgroundColor; color: $fontColor; }
    .el-cascader__tags .el-tag .el-icon-close { background : $borderColor;}
    .el-cascader:not(.is-disabled):hover .el-input__inner { border: 1px solid $backgroundColor; }

    // switch 开关
    .el-switch__label { color: #666; }
    .el-switch__label.is-active { color: #409EFF; }

    

    // 询问框
    .el-popover {
        background-color: $backgroundColor;
        border: 1px solid $borderColor;
        color: $fontColor;
    }

    // empty
    .el-tree__empty-block {
        background-color: $backgroundColor;
        color: $fontColor;
    }

    // 单选
    .el-radio { color: $fontColor * 0.7; }
    .el-radio:hover .el-radio__inner {
        border: 1px solid  $primary-color;
    }
    .el-radio__inner {
        background-color: transparent;
        border: 1px solid  #d9d9d9;
    }

    // 下拉菜单
    .el-dropdown-menu {
        background-color: $backgroundColor;
        border: 1px solid $borderColor;
        
    }
    .el-dropdown-menu__item {
        color: $fontColor;
    }
    .el-dropdown-menu__item--divided{
        border-top: 1px solid $borderColor;
    }
    .el-dropdown-menu__item--divided:before {
        background-color: $borderColor;
    }
    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: $borderColor;
    }
    

    // 弹窗
    .el-dialog{ background-color: $card-bg-color; }
    .el-dialog .el-dialog__body { color: $fontColor; }
    .el-dialog .el-dialog__header { 
        border-bottom: 1px solid $app-bg-color; 
        padding-top: 16px;
        padding-bottom: 16px; 
        padding-left: 24px;
        color: #fff;
        opacity: 0.85;
        min-height: 57px;
    }
    .el-dialog .el-dialog__close { color: #fff;}
    .el-dialog .el-dialog__header .el-dialog__title{ color: #fff; }
    .el-dialog .dialog-action-box { border-top: 1px solid $app-bg-color; }
    .el-dialog .el-dialog__footer {
      border-top: 1px solid $app-bg-color;
      height: 50px;
      padding: 8px;
      box-sizing: border-box;
    }

    // 表单
    .el-form-item .el-form-item__label { color: $fontColor * 0.7; }


    // input
  .el-input__inner{ 
      background: $app-bg-color; 
      color: $fontColor; 
      border: 1px solid $app-bg-color; 
    }

    .el-input__inner:hover {
        border: 1px solid $primary-color; 
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      color: $fontColor * 0.5;
    }
    .el-input-group__append, .el-input-group__prepend {
        border-width: 0;
        background-color:  $disabled-color;
    }

    // textarea 
    .el-textarea__inner { 
        background: $app-bg-color; 
        color: $fontColor; 
        border: 1px solid $app-bg-color; 
    }
    .el-textarea__inner:hover {
        border: 1px solid $primary-color;
    }

    // select 
    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
        background-color: transparent;
    }
    // select asdsa
    .el-select__tags .el-tag.el-tag--info {
        background-color: transparent;
        border-color: $primary-color;
    }
    .el-select:hover .el-input__inner {
        border-color: $primary-color;
    }
    .el-tag.el-tag--info .el-tag__close {
        background-color: $primary-color;
        color: $backgroundColor;
    }

    // tree
    .el-tree{
        background-color: $card-bg-color;
    }
    .el-tree-node:focus>.el-tree-node__content{
        background-color: $card-bg-color;
    }
    .el-tree-node__content:hover {
        background-color: $backgroundColor;
    }
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: $backgroundColor;
        color: $primary-color;
    }

    // 时间选择
    .el-time-range-picker__body { border-color: $borderColor; }
    .el-time-panel__content::after, .el-time-panel__content::before { 
        border-top: 1px solid $borderColor;
        border-bottom: 1px solid $borderColor;
     }
     .el-time-spinner__item.active:not(.disabled) {
        color: $fontColor;
     }
     .el-time-panel__footer { border-top: 1px solid $borderColor; }
     .el-time-spinner__item:hover:not(.disabled):not(.active) {
        background: $card-bg-color;
        cursor: pointer;
    }
    .el-time-panel__btn {
        color: $fontColor * 0.7;
    }
    .el-time-panel__btn.confirm {
        color: $primary-color;
    }

    // 日期选择
    .el-date-picker__header-label { color: $fontColor; }

    .el-range-input{ background: none; color: $fontColor; border-color: $backgroundColor;}
    

    .el-checkbox:not(.is-checked) { color: #fff;  }
    .el-checkbox:not(.is-checked) .el-checkbox__inner{ background: none; }

    // 表格
    .el-table, .el-table__expanded-cell { background-color: $backgroundColor; border-radius: 4px; box-sizing: border-box; border: 0;}
    .el-table th, .el-table tr { background-color: $backgroundColor; color: $fontColor; }
    .el-table .el-table__header th {  opacity: 0.85; }
    .el-table .el-table__body tr { color: $fontColor * 0.75 }
    .el-table td, .el-table th.is-leaf { border-bottom: 1px solid $borderColor; border-right: 1px  solid $borderColor;}
    .el-table--border::after, .el-table--group::after, .el-table::before { background-color: $backgroundColor }
    .el-table--enable-row-hover .el-table__body tr:hover>td { background-color: #1C2939; }
    .el-table--enable-row-hover .el-table__body tr.current-row>td { background-color: #26384e; }

    // 分页器
    .el-pagination__jump, .el-pagination__total { color: $fontColor; opacity: 0.7; }



    .el-picker-panel { background-color: $backgroundColor; color: $fontColor; border: 1px solid $borderColor; }
    .el-date-table td.next-month, .el-date-table td.prev-month { color: #666; }
    .el-picker-panel__icon-btn { color: $fontColor; }
    .el-date-range-picker__time-header{ border-bottom: 1px solid $borderColor }
    .el-date-range-picker__content.is-left{border-right: 1px solid $borderColor}
    .el-picker-panel__footer { background-color: $backgroundColor;border-top: 1px solid $borderColor }
    .el-date-table th { border-bottom: 1px solid $borderColor }
    .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
        background-color: $borderColor;
    }
    .el-input.is-disabled .el-input__inner { background-color: $disabled-color; border: 0; }

    .auth-tree {
      .card {
        border: 0;
        background-color: #141D29;

        .content {
          border-top: 1px solid #1C2938;
          
          .item {
            border-top: 1px solid #1C2938;
          }
        }
      }
    }
}